<template>
	<div class="content">
		<div class="banner" @click="bannerClick()">
			
			<input type="text" placeholder="累计301310个岗位信息">
			<button>
				<img src="../../static/images/ic放大镜.png" alt="" />
				<p>匹配央国企岗位信息</p>
			</button>
			
		</div>
		<div class="tempDiv">
			<span @tap="goToExchangePage()" class="tempButton">兑换中心</span>
			<span @tap="goToTestPage()" class="tempButton">测评</span>
			<span @tap="goToLaw()" class="tempButton">法律援助</span>
			<span @tap="goTocourse()" class="tempButton">课程</span>
			<span @tap="goToEmployment()" class="tempButton">大厂就业</span>
			<span @tap="goToschoolIntro()" class="tempButton">学校介绍</span>
			<span @tap="goToprofessionalAnalysis()" class="tempButton">专业分析</span>
			<span @tap="goToteacherDetails()" class="tempButton">名师详情</span>
			<span @tap="goTocompanyDetails()" class="tempButton">公司详情</span>
			
		</div>
		<div class="list">
			<div @click="zyjd()">
				<p class="list_first">专业解读</p>
				<p class="list_second">求职迷茫、深入解读专业信息</p>
			</div>
			<div>
				<p class="list_first">央国企宝典</p>
				<p class="list_second">想要上岸央国企<br>先要了解央国企</p>
			</div>
		</div>
		
		<div class="tab">
			<div :class="ming1" @click="tabClick1()"><p class="anniu">7天新增</p></div>
			<div :class="ming2" @click="tabClick2()"><p class="anniu">1个月新增</p></div>
			<div v-if="tabqh1">
				<div>
					<p class="tab_title">怀化市农商银行系统-怀化农商银行</p>
					<span class="tab_bq bq1">正式</span>
					<span class="tab_bq bq2">本科及以上</span>
					<span class="tab_bq bq3">25-春招</span>
					<p><span>岗位名称：</span>岗位一（男）</p>
					<p><span>涉及专业：</span>经济和管理学大类、工学大类、法学大类、文史哲大类、理学大类、农学大类</p>
					<p><span>起止时间：</span>2025-03-26 - 2025-04-08</p>
					<p><span>所在城市：</span>湖南省，怀化市</p>
					<p><span>应试要求：</span>国家统招的普通高等院校大学本科及以上学位和相应学位（国外留学文凭凭需经国家认可且具备同等学力和相应学位以上）</p>
					<div class="line"></div>
					
					<div class="tab_lj">
						<img src="../../static/images/收藏_o.png" alt="" />
						<button>报考链接</button>
					</div>
				</div>
				<div>
					<p class="tab_title">怀化市农商银行系统-怀化农商银行</p>
					<span class="tab_bq bq1">正式</span>
					<span class="tab_bq bq2">本科及以上</span>
					<span class="tab_bq bq3">25-春招</span>
					<p><span>岗位名称：</span>岗位一（男）</p>
					<p><span>涉及专业：</span>经济和管理学大类、工学大类、法学大类、文史哲大类、理学大类、农学大类</p>
					<p><span>起止时间：</span>2025-03-26 - 2025-04-08</p>
					<p><span>所在城市：</span>湖南省，怀化市</p>
					<p><span>应试要求：</span>国家统招的普通高等院校大学本科及以上学位和相应学位（国外留学文凭凭需经国家认可且具备同等学力和相应学位以上）</p>
					<div class="line"></div>
					
					<div class="tab_lj">
						<img src="../../static/images/收藏_o.png" alt="" />
						<button>报考链接</button>
					</div>
				</div>
			</div>
			<div v-if="tabqh2">
				<div>
					<p class="tab_title">怀化市农商银行系统-怀化农商银行</p>
					<span class="tab_bq bq1">正式</span>
					<span class="tab_bq bq2">本科及以上</span>
					<span class="tab_bq bq3">25-春招</span>
					<p><span>岗位名称：</span>岗位一（男）</p>
					<p><span>涉及专业：</span>经济和管理学大类、工学大类、法学大类、文史哲大类、理学大类、农学大类</p>
					<p><span>起止时间：</span>2025-03-26 - 2025-04-08</p>
					<p><span>所在城市：</span>湖南省，怀化市</p>
					<p><span>应试要求：</span>国家统招的普通高等院校大学本科及以上学位和相应学位（国外留学文凭凭需经国家认可且具备同等学力和相应学位以上）</p>
					<div class="line"></div>
					
					<div class="tab_lj">
						<img src="../../static/images/收藏_o.png" alt="" />
						<button>报考链接</button>
					</div>
				</div>
				<div>
					<p class="tab_title">怀化市农商银行系统-怀化农商银行</p>
					<span class="tab_bq bq1">正式</span>
					<span class="tab_bq bq2">本科及以上</span>
					<span class="tab_bq bq3">25-春招</span>
					<p><span>岗位名称：</span>岗位一（男）</p>
					<p><span>涉及专业：</span>经济和管理学大类、工学大类、法学大类、文史哲大类、理学大类、农学大类</p>
					<p><span>起止时间：</span>2025-03-26 - 2025-04-08</p>
					<p><span>所在城市：</span>湖南省，怀化市</p>
					<p><span>应试要求：</span>国家统招的普通高等院校大学本科及以上学位和相应学位（国外留学文凭凭需经国家认可且具备同等学力和相应学位以上）</p>
					<div class="line"></div>
					
					<div class="tab_lj">
						<img src="../../static/images/收藏_o.png" alt="" />
						<button>报考链接</button>
					</div>
				</div>
			</div>
		</div>
		
		
	</div>
	
	
	
</template>

<script lang="ts" setup>
	
	import { ref } from "vue";
	
	const ming1 = ref("tab_btn tab_active");
	const ming2 = ref("tab_btn");
	const tabqh1 = ref(true);
	const tabqh2 = ref(false);
	
	const tabClick1 = () =>{
		ming1.value = "tab_btn tab_active";
		ming2.value = "tab_btn";
		
		tabqh1.value = true;
		tabqh2.value = false;
	}
	
	const tabClick2 = () =>{
		ming1.value = "tab_btn";
		ming2.value = "tab_btn tab_active";
		
		tabqh1.value = false;
		tabqh2.value = true;
	}
	
	
	const zyjd = () => {
		// console.log("跳转");
		uni.navigateTo({
			url:"/pages/zyjd/zyjd"
		})
	}
	
	const bannerClick = () => {
		uni.navigateTo({
			url:"/pages/znxg/znxg"
		})
	}
	
	// 跳转【课程】页
	const goTocourse = () => {
		uni.navigateTo({
			url:"/pages/course/course"
		})
	}
	
	// 跳转【大厂就业】页
	const goToEmployment = () => {
		uni.navigateTo({
			url:"/pages/Employment/Employment"
		})
	}
	goToEmployment
	
	// 跳转【学校介绍】页
	const goToschoolIntro = () => {
		uni.navigateTo({
			url:"/pages/schoolIntro/schoolIntro"
		})
	}
	
	// 跳转【专业分析】页
	const goToprofessionalAnalysis = () => {
		uni.navigateTo({
			url:"/pages/professionalAnalysis/professionalAnalysis"
		})
	}
	
	// 跳转【名师详情】页
	const goToteacherDetails = () =>{
		uni.navigateTo({
			url:"/pages/teacherDetails/teacherDetails"
		})
	}
	
	// 跳转【公司详情】页
	const goTocompanyDetails = () =>{
		uni.navigateTo({
			url:"/pages/companyDetails/companyDetails"
		})
	}
	
	// 跳转【视频】页
	const goToVideo = () =>{
		uni.navigateTo({
			url:"/pages/video/video"
		})
	}
	
	// 跳转【法律】页
	const goToLaw = () =>{
		uni.navigateTo({
			url:"/pages/lawPage/lawPage"
		})
	}
	
	// 跳转【测评】页
	const goToTestPage = () =>{
		uni.navigateTo({
			url:"/pages/testPage/testPage"
		})
	}
	
	// 跳转【兑换中心】页
	const goToExchangePage = () =>{
		uni.navigateTo({
			url:"/pages/exchangePage/exchangePage"
		})
	}	
	
</script>

<style lang="scss">
	.tempDiv {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		// background-color: pink;
		margin-top: 20rpx;
	}
	.tempButton {
		background: #1aad19;
		color: #fff;
		margin-right: 15rpx;
		font-size: 30rpx;
		padding: 15rpx 20rpx;
		font-weight: 700;
		border-radius: 12rpx;
		margin-top: 15rpx;
		
	}
	
	
	.content{
		padding:10px;
	}
	.banner{
		width: 100%;
		background-color: skyblue;
		position: relative;
		border-radius: 10px;
		height: 600rpx;
		background-size: 100% 100%;
		
		// 背景图位置
	}
	.banner>input{
		width: 80%;
		height: 100rpx;
		border: 1px solid white;
		border-radius: 10px;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 300rpx;
		transform: translateX(-50%);
		color:#333;
	}
	.banner>button{
		width: 80%;
		height:100rpx;
		background-color: rgb(44,140,254);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top:420rpx;
		color: #fff;
		font-size: 32rpx;
	}
	.banner>button>image{
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
	.list{
		margin-top: 10px;
		// background-color: skyblue;
		display: flex;
		justify-content: space-between;
	}
	.list>view{
		width: 46%;
		height: 200rpx;
		background-color: red;
		box-sizing: border-box;
		padding-left: 40rpx;
		border-radius: 10px;
		padding-top: 30rpx;
		color:#fff;
	}
	.list_first{
		font-size: 35rpx;
		font-weight: bolder;
		margin-bottom: 10rpx;
		background-size: 100% 100%
		
		// 背景图位置
	}
	.list_second{
		width: 80%;
		background-size: 100% 100%;
		
		// 背景图位置
	}
	.tab{
		margin-top: 20px;

	}
	.tab_btn{
		width: 250rpx;
		height: 80rpx !important;
		// border: 1px solid red;
		display: inline-block;
		text-align: center;
		line-height: 80rpx !important;
		padding: 0 0 0 10px !important;
		background-color:rgb(225,231,242) !important;
		border-radius: 10px 10px 0 0 !important;
		margin-bottom:0px !important;
	}
	.tab_btn>view{
		width: 90%;
		background: none !important;
		// margin: 10px;
		
		border-radius: 0px !important;
		padding: 0 !important;
	}
	.tab>view{
		height: 2000rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.tab>view>view{
		background-color: skyblue;
		height: 48%;
		border-radius: 10px;
		background-image: linear-gradient(to bottom,rgb(236,243,253),#fff);
		box-sizing: border-box;
		padding: 10px;
		line-height: 60rpx;
		font-size: 30rpx;
	}
	.tab_active{
		background: #fff !important;
		// border-bottom: 1px solid #999;
	}
	.tab_title{
		font-size: 40rpx;
		margin-bottom: 6px;
		color: rgb(73,94,129);
	}
	.tab>view>view>view{
		color: #666;
		
	}
	.tab>view>view>view>label{
		color: rgb(73,94,129);
		
	}
	.tab>view>view>label{
		border: 2px solid red;
		padding: 1px 2px;
		margin-right: 2px;
		font-size: 25rpx;
	}
	.line{
		// height: 4rpx;
		border-bottom: 4rpx dashed #666;
		margin: 40rpx 0;
	}
	.tab_lj{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50rpx;
	}
	.tab_lj>image{
		width: 50rpx;
		height:50rpx;
	}
	.tab_lj>button{
		width: 250rpx;
		height: 70rpx;
		background-color: rgb(78,159,253);
		color:#fff;
		font-size: 30rpx;
		border-radius: 70rpx;
		margin: 0 !important;
	}
	.anniu{
		line-height: 80rpx !important;
	}
	.bq1{
		border-color: rgb(109,138,254) !important;
		color: rgb(109,138,254);
	}
	.bq2{
		border-color: rgb(246,139,40) !important;
		color: rgb(246,139,40);
	}
	.bq3{
		border-color: rgb(219,186,14) !important;
		color: rgb(219,186,14);
	}
</style>
